/* 
精美视频页面组件 - 推荐 娱乐 最新 热门
*/

<template>
  <scroll-view
    class="video_main"
    scroll-y
    enable-flex
    @scrolltolower="handleScrollToLower"
  >
    <view
      class="video_item"
      v-for="item in videowp"
      :key="item.id"
      @tap="handleGoVideo(item)"
    >
      <image :src="item.img" mode="widthFix" />
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    urlobj: Object
  },
  data() {
    return {
      // 精美视频数据
      videowp: [],
      // 是否还有下一页数据
      hasMore: true
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取接口数据
    getList() {
      this.request({
        url: this.urlobj.url,
        data: this.urlobj.params
      }).then((result) => {
        // 没有数据了
        if (!result.res.videowp.length) {
          this.hasMore = false;
          uni.showToast({
            title: '没有数据了~',
            icon: 'none'
          });
          return false;
        }

        this.videowp = [...this.videowp, ...result.res.videowp];
      });
    },
    // 滚动触底 - 上拉加载 - 分页事件
    handleScrollToLower() {
      if (this.hasMore) {
        /* 
        1 修改请求参数
        2 发送请求
        3 请求成功
        */
        this.urlobj.params.skip += this.urlobj.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: '没有数据了~',
          icon: 'none'
        });
      }
    },
    // 图片点击事件
    handleGoVideo(item) {
      /* 
      1 将数据缓存到全局共享中
      2 页面跳转
      */
      getApp().globalData.video = item;
      uni.navigateTo({
        url: '/pages/videoPlay/index'
      });
    }
  },
  // 侦听器
  watch: {
    urlobj() {
      this.videowp = [];
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.video_main {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .video_item {
    width: 33.33%;
    border: 5rpx solid #fff;
    image {
    }
  }
}
</style>